<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>lol heros</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  ul, li {
    list-style: none;
  }
  .info-showbox {
    padding: 30px 37px 30px 30px;
    position: relative;
    min-height: 500px;   /*在页面上占据高度， 让内部的内容慢慢加载进来， 让页面打开更快， 没有它， 页面就会撑一下， 不好看*/
    _height: 500px; /*兼容性 ie低版本不支持 min-height  ie6*/
  }
  /* 布局 */
  .selete-checklist {
    float: left;
    width: 70%;
    padding-top: 5px;
  }
  .selete-item {
    float: left;
    min-width: 60px;
    _width: 60px; /*手机网站就不用*/
    margin-right: 17px;
    position: relative;
  }
  .ms-radio {
    margin-right: 3px;
    /* span是行内元素 */
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #b1b1b1;
    border-radius: 10px;
    cursor: pointer;
    position:relative;
  }
  .ms-radio .i {
    display: inline-block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 10px;
  }
  .current .i {
    background-color: #00a383;
  }

  .searchbox {
    width: 24%;
    float:right;
  }
  .imgtextlist {
    float: left;
    padding: 30px 0 0;
    position: relative;
  }
  .imgtextlist li {
    float: left;
    width: 90px;
    height: 100px;
    margin-bottom: 22px;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .imgtextlist img {
    display: block;
    width: 66px;
    height: 65px;
    margin: 0 auto 7px;
  }
  .clearfix:after {
    content: "";
    display: block;
    clear:both;
  }
  </style>
</head>
<body>
  <!-- 英雄选择 -->
  <div class="info-showbox">
    <div class="clearfix">
        <ul class="selete-checklist">
            <li class="selete-item current">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">所有英雄</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">战士</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">法师</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">刺客</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">坦克</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">射手</label>
            </li>
            <li class="selete-item">
              <span class="ms-radio">
                <i class="i"></i>
              </span>
              <label for="">辅助</label>
            </li>
          </ul>
          <div class="searchbox">
          </div>
    </div>
    
    <!-- 先做一个静态的 -->
    <ul class="imgtextlist">
      <li>
        <img src="https://game.gtimg.cn/images/lol/act/img/champion/Aatrox.png" alt="">
        <p>暗裔剑魔</p>
      </li>
    </ul>
  </div>
  <script>
  // const seleteItem = document.querySelector('.selete-item');
  // seleteItem.addEventListener('click', function() {
  //   // console.log(this.classList);
  //   if (!this.classList.contains('current')) {
  //     this.classList.add('current');
  //   }
  // })
  const seleteItems = document.querySelectorAll('.selete-item');
  console.log(seleteItems);
  // seleteItems.addEventListener('click', function() {
  //   // console.log('click');
  
  // })
  seleteItems.forEach(function(item){
    console.log(item);
    item.addEventListener('click', function() {
      document.querySelector('.current').classList.remove('current');
      this.classList.add('current');
    })
  })


  </script>
</body>
</html>